<template>
  <FieldLabel
    :error-message="errorMessage"
    :required="required"
    :label="label"
    :is-error-message="isErrorMessage"
  >
    <van-field
      class="van_field"
      name="stepper"
    >
      <template #input>
        <slot />
      </template>
    </van-field>
  </FieldLabel>
</template>

<script>
export default {
  name: 'CustomVanField',

  props: {
    // 可点击
    isLink: {
      type: Boolean,
      default: () => false
    },

    // 错误信息展示
    isErrorMessage: {
      type: Boolean,
      default: () => true
    },

    // 标题
    label: {
      type: String,
      default: () => ''
    },

    // 错误信息
    errorMessage: {
      type: String,
      default: () => ''
    },

    // 必填
    required: {
      type: Boolean,
      default: () => false
    },

    // 禁用
    disabled: {
      type: Boolean,
      default: () => false
    }
  }
};
</script>

<style lang="scss" scoped>
.van_field {
  padding: 0;
  border: 1px solid $gray-8;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(232, 239, 255, 0.8);
}
</style>
<style lang="scss">
// 禁用样式
.custom-form-container {
  margin-bottom: $margin-xs;
  .van_cell_field_label,
  .van-field__control:disabled {
    color: $gray-12;
    -webkit-text-fill-color: $gray-12;
  }
}
.custom--select {
  .van-icon-arrow-down {
    color: $theme-color;
  }
}
</style>
